<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'
import LTUpload from '@/components/element-upload'
import PicUpload from "@/components/base-ui/editor/picUpload.vue";

import { reactive, ref } from 'vue'
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { message } from "@/utils/message";
import { companyProfilegetusinfo, companyProfilechangeusinfo } from '@/api/aboutUs'
import { Plus, Delete, Check } from '@element-plus/icons-vue'










const loading = ref(true)

const input = ref('')

const ruleForm = ref([])

const addFn = () => {
  ruleForm.value.push({
    title: '',
    img: '',
    content: '',
    webId: new Date().getTime(),
  })
}



const submitFn = () => {
  console.log(ruleForm.value)
}


const updatelValFn = (e) => {
  console.log(e)
}

const delFn = (item) => {
  console.log()
  ruleForm.value = ruleForm.value.filter(v => v.webId != item.webId)
}
</script>

<template>
  <el-card>
    <el-button type="primary" :icon="Plus" @click="addFn">添加</el-button>
    <el-card class="mt-5 relative" v-for="(item, index) in ruleForm" :key="item.webId">



      <el-popconfirm title="确认要删除吗?" @confirm="delFn(item)">
        <template #reference>
          <el-button class="absolute right-[10px] top-[10px] z-10" type="danger" :icon="Delete" circle />
        </template>
      </el-popconfirm>


      <el-form-item label="标题">
        <el-input v-model="item.title" style="width: 240px" placeholder="请输入标题" clearable />
      </el-form-item>
      <el-form-item label="图标">
        <LTUpload uploadType="image" v-model="item.img"></LTUpload>
      </el-form-item>

      <el-form-item label="内容">


        <div shadow="never" style="height: 360px;border:1px solid #ccc;">
          <PicUpload v-model:editorValue="item.content" :htmlVal="item.content" @updatelVal="updatelValFn" />
        </div>


      </el-form-item>





    </el-card>


    <el-button v-if="ruleForm.length > 0" class="mt-[50px]" type="success" :icon="Check" @click="submitFn">确定</el-button>

  </el-card>
</template>

<style lang='scss' scoped></style>
